<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>崃州烈酒</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="module">
        import { wechatConfig, gifMap } from './js/config.js';
        import { getUrlParam, showLoading, hideLoading, showDialog } from './js/utils.js';
        import { handleSave } from './js/saveimg.js';

        // 微信初始化
        function initWechatSDK() {
            return new Promise((resolve, reject) => {
                if (typeof wx === 'undefined') {
                    reject('非微信环境');
                    return;
                }

                wx.config(wechatConfig);

                wx.ready(() => {
                    console.log('微信JS-SDK 初始化完成');
                    resolve();
                });

                wx.error(err => {
                    console.error('微信JS-SDK 初始化失败', err);
                    reject(err);
                });
            });
        }

        // 页面初始化
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                // 优先初始化微信SDK
                await initWechatSDK();
            } catch (err) {
                console.warn('初始化异常:', err);
            }

            const id = getUrlParam('id') || 0;
            const gifUrl = gifMap[id] || Object.values(gifMap)[0];
            const imgElement = document.querySelector('#gif-container img');

            // 图片加载处理
            imgElement.onload = hideLoading;
            imgElement.onerror = () => {
                showLoading('图片加载失败');
                imgElement.style.display = 'none';
            };
            imgElement.src = gifUrl;

            // 长按事件绑定
            let pressTimer;
            document.getElementById('gif-container').addEventListener('touchstart', () => {
                pressTimer = setTimeout(showDialog, 1000);
            });
            document.getElementById('gif-container').addEventListener('touchend', () => clearTimeout(pressTimer));
        });
    </script>
    <!--<style>
        /* 浮动容器样式 */
        .float-icon {
            position: fixed;  /* 固定定位 */
            right: 20px;     /* 距离右侧20px */
            bottom: 60px;    /* 距离底部60px */
            
            /* 动画配置 */
            animation: float 3s ease-in-out infinite;
            
            /* 图标样式 */
            width: 40px;
            height: 40px;
        }

        /* 浮动动画定义 */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
    </style>-->
</head>

<body>
    <!-- 背景层 -->
    <div class="background-layer"></div>

    <!-- GIF容器 -->
    <div class="gif-wrapper">
         <div id="gif-container">
            <div class="loading">加载中...</div>
            <img src="" alt="gif">
        </div>
    </div>

    <!--<img src="bg_tip.png" class="float-icon" alt="浮动图标">-->

    <!-- 保存弹窗 -->
    <div class="dialog-mask" id="dialogMask">
        <div class="save-dialog">
            <p>确认存储</p>
            <div class="dialog-btns">  <!-- 新增按钮容器 -->
                <button class="dialog-btn save-btn" id="saveBtn">储存到我的相册</button>
                <button class="dialog-btn cancel-btn" id="cancelBtn">取消</button>
            </div>
        </div>
    </div>
</body>

</html>